<template>
  <div class="home">
    <div class="lg-slg">
      <div class="lg">
        <span>小军个人网站欢迎您</span>
      </div>
      <div class="slg-ct">
        <div class="slg en sthei">IOS,swift,small program, public number, vue technology</div>
        <div class="slg ch">iOS、swift、小程序、公众号、vue技术交流</div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import remotejs from "../components/remote-js";

export default {
  name: "home",
  components: {
    remotejs
  },
  data() {
    return {
      scene: null,
      camera: null,
      mouseX: null,
      mouseY: null,
      renderer: null,
      windowHalfX: null,
      windowHalfY: null
    };
  },
  created: function() {
    this.init();
    this.animate();
  },

  mounted: function() {},
  beforeUpdate() {},
  methods: {
    init: function() {
      console.log("我开始下载 js文件");
      var container, aspect, fov, plane, far;
      container = document.createElement(`div`);
      container.style.position = "absolute";
      container.style.top = "0px";
      container.style.zIndex = -100;
      document.body.appendChild(container);

      this.mouseX = 0;
      this.mouseY = 0;

      this.windowHalfX = window.innerWidth / 2;
      //  + window.document.body.offsetWidth
      this.windowHalfY = window.screen.availHeight / 2;

      aspect = window.innerWidth / this.windowHalfY;
      fov = 40;
      plane = 1;
      far = 800;

      this.camera = new THREE.PerspectiveCamera(fov, aspect, plane, far);

      this.camera.position.z = far / 2;

      this.scene = new THREE.Scene({ antialias: true });
      this.scene.fog = new THREE.FogExp2(0x1b1b1b, 0.0001);

      this.starForge();

      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.renderer.setPixelRatio(
        window.devicePixelRatio ? window.devicePixelRatio : 1
      );
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.autoClear = false;
      this.renderer.setClearColor(0x000000, 0.0);
      container.appendChild(this.renderer.domElement);

      document.addEventListener("mousemove", this.onMouseMove, false);
    },

    animate: function() {
      requestAnimationFrame(this.animate);
      this.render();
    },

    render: function() {
      this.camera.position.x += (this.mouseX - this.camera.position.x) * 0.005;
      this.camera.position.y += (-this.mouseY - this.camera.position.y) * 0.005;
      this.camera.lookAt(this.scene.position);
      this.renderer.render(this.scene, this.camera);
    },

    starForge: function() {
      var geometry, materialOptions, stars, starStuff;
      var amount = 45000;
      geometry = new THREE.SphereGeometry(1000, 100, 50);

      materialOptions = {
        color: new THREE.Color(0xffffff),
        size: 1.1,
        transparency: true,
        opacity: 0.8
      };

      starStuff = new THREE.PointsMaterial(materialOptions);

      for (var i = 0; i < amount; i++) {
        var item = new THREE.Vector3();
        item.x = Math.random() * 2000 - 1000;
        item.y = Math.random() * 2000 - 1000;
        item.z = Math.random() * 2000 - 1000;

        geometry.vertices.push(item);
      }

      stars = new THREE.PointCloud(geometry, starStuff);
      this.scene.add(stars);
    },

    onMouseMove: function(e) {
      this.mouseX = e.clientX - this.windowHalfX;
      this.mouseY = e.clientY - this.windowHalfY;
    }
  }
};
</script>

<style>
html {
  background: linear-gradient(-190deg, #4a4ea4 65%, #e884a1);
}
.home {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.lg-slg {
  width: 700px;
  text-align: center;
  color: #fff;
}
.lg {
  position: relative;
  padding-bottom: 20px;
}
.lg:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-radius: 2px;
}
.lg span {
  font-size: 36px;
  letter-spacing: 10.8px;
}

.slg-ct {
  padding-top: 15px;
  width: 80%;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
}

.sthei {
  font-family: STHeiTi, -apple-system-font, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Helvetica Neue, sans-serif;
}

.slg.ch {
  margin-top: 15px;
  letter-spacing: 10.8px;
}
</style>

